<template>
  <div class="page-container">
    <div class="toolbar">
      <el-row>
        <el-tabs type="border-card">
          <el-tab-pane label="单据信息">
            <el-form :inline="true" :model="operateDataForm" label-width="110px" style="text-align:left;" ref="operateDataForm" :rules="operateDataFormRules" :disabled="isEdit" class="form">
              <el-row class="search-input">
                <el-form-item label v-show="false">
                  <el-input v-model="operateDataForm.id" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="置顶名称：">
                  <el-input v-model="operateDataForm.name" placeholder="请输入置顶名称"></el-input>
                </el-form-item>
                <el-form-item label="显示位置：">
                  <el-select v-model="operateDataForm.position" clearable placeholder="请选择显示位置">
                    <el-option label="全部" value="1"></el-option>
                    <el-option label="首页" value="2"></el-option>
                    <el-option label="商品列表" value="3"></el-option>
                    <el-option label="活动聚合页面" value="4"></el-option>
                    <el-option label="详情页推荐列表" value="5"></el-option>
                  </el-select>
                </el-form-item>
              </el-row>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-row>
      <el-row>
        <el-tabs type="border-card">
          <div class="tool-wrap">
            <div class="search-button mt5">
              <el-button-group>
                <el-button type="primary" size="small" @click="addProduct">新增</el-button>
                <el-button type="primary" size="small" @click="deleteProduct">删除</el-button>
              </el-button-group>
            </div>
          </div>
          <el-tab-pane label="  商品信息">
            <el-table :data="tableData" height="250" border style="width: 100%" @selection-change="handleSelectionChange1">
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column prop="code" label="编码" width="250"></el-table-column>
              <el-table-column prop="chineseName" label="商品名称" width="200"></el-table-column>
              <el-table-column prop="fullNamePath" label="商品类目" width="200"></el-table-column>
              <el-table-column v-if="!isEdit" prop="effectTime" label="置顶时间">

                <template slot-scope="scope">
                  <div>
                    <el-date-picker size="small" v-model="scope.row.effectTime" placeholder="请输入置顶时间" @input="effectTime(scope.row,scope.row.effectTime,scope.$index)"></el-date-picker>
                  </div>
                </template>
              </el-table-column>
              <el-table-column v-if="isEdit" prop="effectTime" label="置顶时间"></el-table-column>
<!--              <el-table-column prop="diffNum" label="差异数量"></el-table-column>-->
            </el-table>
          </el-tab-pane>
          <div class="tool-wrap">
            <div>
              <el-button-group>
                <el-button  type="primary" size="small" @click="saveProduct()">保存</el-button>
                <el-button type="primary" size="small" @click="back">返回</el-button>
              </el-button-group>
            </div>
          </div>
        </el-tabs>
      </el-row>

      <!--新增商品弹窗-->
      <el-dialog title="选择商品" :visible.sync="dialogTableVisible" width="60%">
        <div class="search-wrap">
          <el-form :inline="true" :model="searchFilters" ref="searchFilters" label-position="right" label-width="200px">
            <el-form-item label="商品编码">
              <el-input v-model="searchFilters.code" placeholder="请输入商品编码"></el-input>
            </el-form-item>
            <el-form-item label="商品名称">
              <el-input v-model="searchFilters.chineseName" placeholder="请输入商品名称"></el-input>
            </el-form-item>
            <el-button size="mini" @click="queryProduct">查询</el-button>
          </el-form>
        </div>
        <div class="table-wrap">
          <el-table :data="tableProductData" height="500px" @selection-change="handleSelectionChange">
            <el-table-column align="center" type="selection" width="55"/>
            <el-table-column align="center" prop="code" label="编码" width="180"></el-table-column>
            <el-table-column align="center" prop="chineseName" label="商品名称" width="180"></el-table-column>
            <el-table-column align="center" prop="fullNamePath" label="商品类目"></el-table-column>
            <el-table-column align="center" prop="type" label="商品类型"></el-table-column>
            <el-table-column align="center" prop="productForm" label="商品形式"></el-table-column>
            <el-table-column align="center" prop="retailPrice" label="零售价"></el-table-column>
          </el-table>
          <!--分页栏-->
          <div class="toolbar" style="padding:10px;">
            <el-pagination layout="total, prev, pager, next, jumper,sizes" @current-change="refreshPageRequest" @size-change="handleSizeChange" :current-page="pageRequest.pageNum" :page-size="pageRequest.pageSize" :total="totalSize" style="float:right;" :page-sizes="[10, 20, 30, 40]"></el-pagination>
          </div>
        </div>
        <div slot="footer" class="dialog-footer" style="text-align: center">
          <el-button @click="addOperateProduct">保 存</el-button>
          <el-button type="primary" @click="dialogTableVisible = false">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  export default {
    components: {
    },
    data() {
      return {
        isEdit: false,
        checkStatus: this.$route.params.checkStatus,
        fileList: [],
        pageRequest: {
          pageNum: 1,
          pageSize: 10
        },
        totalSize: 0,
        limitUpload: 1,
        fileTemp: null,
        showAddDialog: false,
        selections: [],
        selectionsAdd: [],
        searchFilters: {
          chineseName: null,
          deptId: null,
        },
        dialogTableVisible: false,
        deptList: [],
        storeList: [],
        operates: [],
        tableData: [],
        tableProductData: [],
        operateDataForm: {
          id: null,
          type: null,
          // deptId: null,
          storeId: null,
          // location: null,
          // remark: null,
          // batchNo: null,
          // code: "P" + new Date().getTime(),
          // storeObj: null,
          name:null,
          position:null


        },
        operateDataFormRules: {
          position: [{
            required: true,
            message: "请选择仓库",
            trigger: "change"
          }],
        },
      };
    },

    methods: {

      //盘点数量修改
      effectTime: function (row, num, index1) {
        let this_ = this
        this_.tableData.forEach(function (item, index) {
          if (index1 == index) {
            item.diffNum = Number(num) - Number(row.availableStock)
          }
        })

      },
      //返回上一页;
      back() {
        this.$router.push({
          path: "/Pages/Product/MEffectProductList"
        });
      },
      //仓库选择
      // selectStore(item) {
      //   this.operateDataForm.deptId = item.deptId
      // },
      //打开弹框
      addProduct() {
        let this_ = this;
        if (this_.operateDataForm.position == null) {
          this_.$message({
            message: "请选择置顶位置",
            type: "info"
          });
        } else {
          this.dialogTableVisible = true;
          this.queryProduct();
        }
      },
      //查询商品
      queryProduct(params) {
        let this_ = this;
        if (params == undefined || params == null) {
          params = {
            pageNum: this_.pageRequest.pageNum,
            pageSize: this_.pageRequest.pageSize
          };
        }
        if (this_.searchFilters == undefined || this_.searchFilters == null) {
          this_.searchFilters = {};
        }
        this_.searchFilters.start = params.pageNum;
        this_.searchFilters.limit = params.pageSize;
        this_.searchFilters.deptId = this_.operateDataForm.deptId
        this.utils.request.queryPageProductManagement(this_.searchFilters, function (res) {
          this_.tableProductData = res.data.rows;
          this_.totalSize = Number(res.data.total);
        });
      },
      //删除商品
      deleteProduct() {
        this.selectionsAdd.forEach(item => {
          this.tableData.forEach((item1, index) => {
            if (item.productId == item1.productId) {
              this.tableData.splice(index, 1);
            }
          });
        });
      },
      //添加商品
      addOperateProduct() {
        let this_ = this;
        if (this_.selections.length == 0) {
          this_.$message({
            message: "请选择商品",
            type: "info"
          });
        } else {
          this_.dialogTableVisible = false;
          this_.$message({
            message: "操作成功",
            type: "success"
          });
          if (this_.tableData.length == 0) {
            this_.selections.forEach(item => {
              let obj = {}
              obj.id = item.id
              obj.code = item.code
              obj.fullNamePath = item.fullNamePath
              obj.chineseName = item.chineseName
              obj.artNo = item.artNo
              obj.productId = item.productId
              obj.barCode = item.barCode
              obj.availableStock = item.availableStock
              obj.name = item.name
              obj.applyNum = null
              obj.actualNum = null
              this_.tableData.push(obj)
            })
          } else {
            this_.tableData.forEach(item => {
              this_.selections.forEach(function (item1, index) {
                if (item.productId == item1.productId) {
                  this_.selections.splice(index, 1)
                } else {
                  let obj = {}
                  obj.code = item1.code
                  obj.chineseName = item1.chineseName
                  obj.productId = item1.productId
                  obj.artNo = item1.artNo
                  obj.barCode = item1.barCode
                  obj.availableStock = item1.availableStock
                  obj.unitName = item1.name
                  obj.applyNum = null
                  obj.actualNum = null
                  this_.tableData.push(obj)
                }
              })
            })
          }
        }
      },
      // 每页数据刷新
      refreshPageRequest: function (pageNum) {
        this.pageRequest.pageNum = pageNum;
        this.queryProduct(this.pageRequest1);
      },
      // 每页条数刷新
      handleSizeChange: function (pageSize) {
        this.pageRequest.pageSize = pageSize;
        this.queryProduct();
      },
      //保存
      saveProduct(param) {
        let this_ = this;
        this.$refs["operateDataForm"].validate(valid => {
          if (valid) {
            let flag = false
            if (this_.tableData.length == 0) {
              this_.$message({
                message: "请选择商品",
                type: "info"
              });
              flag = true
            } else {
              this_.tableData.forEach(function (item, index) {
                if (item.effectTime == null || item.effectTime == "") {
                  let rowIndex = index + 1
                  this_.$message({
                    message: "第 " + rowIndex + " 行商品盘点不能为空",
                    type: "info"
                  });
                  flag = true
                  return;
                }
              })
            }
            if (!flag) {
              this.$confirm("确认提交吗？", "提示", {}).then(() => {
                let params = Object.assign({}, this.operateDataForm);
                params.products = this_.tableData
                params.storeId = this_.operateDataForm.position.id
                this.utils.request.saveTopProduct(params, function (res) {
                  if (res.code == "0000") {
                    this_.$message({
                      message: "操作成功",
                      type: "success"
                    });
                    this_.$router.push({
                      path: "/Pages/Product/MEffectProductList"
                    });
                  } else {
                    this_.$message({
                      message: "操作失败," + res.msg,
                      type: "error"
                    });
                  }
                });
              });
            }
          }
        });
      },
      //移除文件的操作方法
      handleRemove(file, fileList) {
        this.fileTemp = null;
      },

      handleSelectionChange(val) {
        this.selections = val;
      },
      handleSelectionChange1(val) {
        this.selectionsAdd = val;
      }
    },
  };
</script>

<style lang="scss" scoped>
  /* ele组件样式重置 */
  .common-content {
    padding: 10px;
    box-sizing: border-box;

    .search-wrap /deep/ {
      .el-form-item__label {
        height: 32px;
        line-height: 32px;
      }

      .el-form-item__content {
        height: 32px;
        line-height: 32px;
        width: 150px;
      }

      .el-input--mini .el-input__inner {
        height: 32px;
        line-height: 32px;
      }

      .el-date-editor.el-input,
      .el-date-editor.el-input__inner {
        width: 150px;
      }
    }

    /* 多日期样式重置 */
    .el-dater /deep/ .el-form-item__content {
      width: 330px;
    }

    /* 通用工具部分样式 */
    .tool-wrap {
      width: 100%;
      height: auto;
      position: relative;
      overflow: hidden;

      .left-area {
        float: left;
        width: 50%;
        text-align: left;

        button {
          margin-right: 15px;
          border-radius: 5px;
        }
      }

      .right-area {
        float: right;
        width: 50%;
        text-align: right;
      }
    }

    /* 表格部分样式 */
    .table-wrap {
      width: 100%;
      max-height: 600px;
      margin-top: 20px;
    }

    /* 弹窗样式 */
    .dialog-wrap /deep/ .el-dialog__footer {
      text-align: center !important;
    }
  }

  .search-input {
    padding-top: 20px;
    padding-bottom: 0px;
  }

  .mt5 {
    margin-top: 5px;
  }
</style>
